import React, { Component } from 'react';
import { getList } from '../../../api'
import List from '../../../components/List'
import BScroll from '@better-scroll/core'
import ObserveImage from '@better-scroll/observe-image'
import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up'
import './style.scss'
BScroll.use(Pullup)
BScroll.use(ObserveDOM)
BScroll.use(ObserveImage)
class Index extends Component {
  state = {
    pageCode: 1,
    pageSize: 10,
    list: []
  }
  async getListAndSet() {
    const { pageCode, pageSize, list } = this.state
    console.log(`第${pageCode}次数据加载`);
    const resp = await getList({ pageCode, pageSize })
    const { data } = resp.data
    const newList = list.concat(data)

    this.setState({
      list: newList,
      pageCode: pageCode + 1
    })

  }
  initBScroll() {
    this.bscroll = new BScroll('.scroll-wrapper', {
      //...
      click: true, // 派发点击事件
      observeImage: true, // 开启 observe-image 插件
      observeDOM: true, // 开启 observe-dom 插件
      pullUpLoad: true// 开启 上拉 插件
    })

    this.bscroll.on('pullingUp', this.pullingUpHandler)
  }
  pullingUpHandler = () => {
    this.getListAndSet()
    this.bscroll.finishPullUp()
  }
  render() {
    const { list } = this.state
    const { history } = this.props
    return (
      <div className="scroll-wrapper">
        <List list={list} type="row" history={ history }></List>
      </div>
    );
  }
  componentDidMount() {
    this.getListAndSet()
    this.initBScroll()
  }
}

export default Index;
